<!--
 * @Author: your name
 * @Date: 2020-05-20 10:15:09
 * @LastEditTime: 2020-09-02 18:22:40
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /vue-cli4-multi/src/modules/front/pages/GattTable/components/GattLeft/components/GatttableTr.vue
 -->
<template>
  <div>
    <div class="gatt-tr-c" v-for="(tr,index) in data" :key="index">
      <div class="gatt-tr" :class="{'gatt-tr-cur': tr.focus}">
        <div class="gatt-td" v-for="(th,key) in headData" :key="key" v-show="!th.hideHead">
          <gatttable-td
            :tdData="tr"
            :index="index"
            :keyValue="key"
            :th="th"
            @handleClick="handleClick"
            @change="change">
          </gatttable-td>
        </div>
      </div>
      <gatttable-tr
        v-if="tr.children && tr.open"
        @handleClick="handleClick"
        @change="change"
        :allData="allData"
        :data="tr.children"
        :headData="headData">
      </gatttable-tr>
    </div>
  </div>
</template>

<script>
import GatttableTd from './GatttableTd.vue'
export default {
  name: 'GatttableTr',
  components: {
    GatttableTd
  },
  props: {
    allData: Array,
    data: Array,
    headData: Object
  },
  methods: {
    change (data) {
      this.$emit('change', data)
    },
    handleClick (data) {
      this.$emit('handleClick', data)
    }
  }
}
</script>

<style lang="stylus" scoped>
.gatt-tr-c
  .gatt-tr
    display table-row
    &:hover
      background rgba(245, 247, 250, 0.6)
      // background #f5f7fa
    &-cur
      background-color rgba(245, 247, 250, 0.6)
    .gatt-td
      display table-cell
      position relative
      word-break keep-all
      box-sizing border-box
      white-space nowrap
      text-overflow ellipsis
      vertical-align middle
      white-space nowrap
      border-bottom 1px solid #ebeef5
      border-right 1px solid #ebeef5
      line-height 38px
</style>
